<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'header.php'?>
<style type="text/css">
	#import {
		position: relative;
		top: 1.4px;
	}
    #dynamic-table img {
		cursor: pointer;
		max-height: 200px;
	}
	#cboxClose {
		text-indent: 0;
		font-size: 50px;
		font-weight: bold;
		margin-top: 10px;
		color: red;
	}
	.work-div {
		position: relative;
	}
	#work-calendar {
		width: 200px;
		padding-left: 30px;
	}
	.fa-calendar{
		position: absolute;
		left: 8px;
		top: 9px;
	}
</style>
<div class="page-header">
	<h1>
		考勤数据

			<a href="<?=admin_url('data/student_sign_today')?>" class="btn btn-info a-custom">
				<i class="ace-icon fa fa-table"></i> 查看今日考勤数据
			</a>

			<a href="javascript:;" id="export_student_sign" target="_blank" class="btn btn-info a-custom">
				<i class="ace-icon fa fa-download"></i> 导出考勤数据
			</a>
	</h1>
</div>
<div class="col-xs-12 content-filter">
	<!-- 筛选 -->
	<div class="widget-box">
		<div class="widget-header">
			<h4 class="widget-title">内容筛选</h4>
			<div class="widget-toolbar">
				<a href="#" data-action="collapse">
					<i class="ace-icon fa fa-chevron-up"></i>
				</a>
				<a href="#" data-action="close">
					<i class="ace-icon fa fa-times"></i>
				</a>
			</div>
		</div>
		<div class="widget-body">
			<div class="widget-main">
				<div class="form-inline" id="data-search">
					<div class="form-inline keyword-search-div">
						<label class="keyword-search-label">名称&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
						<div class="keyword-search-box">
							<div class="div-search">
								<input style="float:left;height:30px;width:180px;border:1px solid #669FC7;padding:0 30px 0 14px;border-radius:10px 0 0 10px !important;-moz-border-radius:10px 0 0 10px;" type="text" name="student-name" placeholder="搜索学生名称..." autocomplete="off">
								<span id="empty-search" style="position:relative;right:64px;cursor:pointer;display:none;">×</span>
								<button id="btn-search" class="btn-search" style="outline:none;float:left;height:30px;width:44px;border:1px solid #669FC7;background-color:#669FC7;border:0;border-radius:0 10px 10px 0;-moz-border-radius:0 10px 10px 0;">
									<i class="ace-icon fa fa-search nav-search-icon white"></i>
								</button>
							</div>
						</div>
					</div>
					<!-- 管理员权限 -->
					<?php if($rmxUser['user_type'] == USER_TYPE_SCHOOL): ?>
						<div class="form-inline keyword-search-div" id="div-grade">
							<label class="keyword-search-label">年级&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
							<div class="keyword-search-box">
								<a href="javascript:;" class="keyword-search-keyword keyword-search-grade active" data-id="0">全部</a>
								<?php if(isset($gradeList)): ?>
									<?php foreach($gradeList as $grade): ?>
										<a href="javascript:;" class="keyword-search-keyword keyword-search-grade"  data-id="<?=$grade['id']?>"><?=$grade['grade_name']?></a>
									<?php endforeach; ?>
								<?php endif ?>
							</div>
						</div>
						<div class="form-inline keyword-search-div" id="div-normal-class">
							<label class="keyword-search-label">班级&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
							<div class="keyword-search-box">
								<a href="javascript:;" class="keyword-search-keyword keyword-search-normal-class active" data-id="0">全部</a>
							</div>
						</div>
						<!-- <div class="form-inline keyword-search-div" id="div-teaching-class">
							<label class="keyword-search-label">教学班&nbsp;&nbsp;&nbsp;&nbsp;</label>
							<div class="keyword-search-box">
								<a href="javascript:;" class="keyword-search-keyword keyword-search-teaching-class active" data-id="0">全部</a>
							</div>
						</div> -->
					<?php else: ?>	
					<!-- 教师权限 -->
					<div class="form-inline keyword-search-div" id="div-normal-class">
							<label class="keyword-search-label">班级&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
							<div class="keyword-search-box div-classes">
								<a href="javascript:;" class="keyword-search-keyword keyword-search-class active" data-id="0">全部</a>
								<?php foreach($rmxUser['classArr'] as $class): ?>
									<a href="javascript:;" class="keyword-search-keyword keyword-search-class" data-id="<?=$class['id']?>"><?=$class['name']?></a>
								<?php endforeach; ?>
							</div>
						</div>
                    <?php endif ?>
                    <div class="form-inline keyword-search-div">
                        <label class="keyword-search-label">签到类型</label>
                        <div class="keyword-search-box" id="div-type">
                            <a href="javascript:;" class="keyword-search-keyword active" data-id="0">全部</a>
                            <a href="javascript:;" class="keyword-search-keyword" data-id="<?=SIGN_TYPE_CARD?>">刷卡</a>
                            <a href="javascript:;" class="keyword-search-keyword" data-id="<?=SIGN_TYPE_FACE?>">人脸识别</a>
							<a href="javascript:;" class="keyword-search-keyword" data-id="<?=SIGN_TYPE_TEMPERATURE?>">热成像测温</a>
							<a href="javascript:;" class="keyword-search-keyword" data-id="<?=SIGN_TYPE_TEMPERATURE_HEAD?>">额温枪测温</a>
							<a href="javascript:;" class="keyword-search-keyword" data-id="<?=SIGN_TYPE_TEMPERATURE_WRIST?>">腕温测温</a>
                        </div>
					</div>
					<div class="form-inline keyword-search-div">
                        <label class="keyword-search-label">签到状态</label>
                        <div class="keyword-search-box" id="div-state">
                            <a href="javascript:;" class="keyword-search-keyword active" data-id="0">全部</a>
                            <a href="javascript:;" class="keyword-search-keyword" data-id="<?=SIGN_STATE_NORMAL?>">行政班考勤</a>
                            <a href="javascript:;" class="keyword-search-keyword" data-id="<?=SIGN_STATE_NORMAL_SUPPLEMENT?>">行政班补签</a>
							<a href="javascript:;" class="keyword-search-keyword" data-id="<?=SIGN_STATE_TEACH?>">教学班考勤</a>
							<a href="javascript:;" class="keyword-search-keyword" data-id="<?=SIGN_STATE_TEACH_SUPPLEMENT?>">教学班补签</a>
							<a href="javascript:;" class="keyword-search-keyword" data-id="<?=SIGN_STATE_EXAM?>">考试签到</a>
							<a href="javascript:;" class="keyword-search-keyword" data-id="<?=SIGN_STATE_EXAM_SUPPLEMENT?>">考试补签</a>
							<a href="javascript:;" class="keyword-search-keyword" data-id="<?=SIGN_STATE_LEAVE?>">离校考勤</a>
                        </div>
					</div>
					<?php if($temperatureOpen): ?>
						<div class="form-inline keyword-search-div">
							<label class="keyword-search-label">体温&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
							<div class="keyword-search-box" id="div-temperature">
								<a href="javascript:;" class="keyword-search-keyword active" data-value="">全部</a>
								<a href="javascript:;" class="keyword-search-keyword" data-value="normal">正常</a>
								<a href="javascript:;" class="keyword-search-keyword" data-value="abnormal">异常</a>
							</div>
						</div>
					<?php endif ?>	

                    <div class="form-inline keyword-search-div">
                        <label class="keyword-search-label" style="padding-top:5px;">签到时间&nbsp;&nbsp;&nbsp;&nbsp;</label>
                        <div class="header-box">
                            <div class="work-div">
                                <!-- <div id="work-calendar" class="work-calendar"></div>
								<div class="rec"></div> -->
								<input type="text" id="work-calendar" readonly>
								<i class="fa fa-calendar"></i>
                            </div>
                        </div>
                    </div>

				</div>
			</div>
		</div>
	</div>
</div>
<div class="col-xs-12">
	<!-- 学校表格 -->
	<table id="dynamic-table" class="table table-striped table-bordered table-hover mt10">
		<thead>
			<tr>
				<th>学生名称</th>
                <th>班级名称</th>
                <th>课程科目</th>
                <th>签到类型</th>
				<th>签到状态</th>
				<th>签到图片</th>
				<?php if($temperatureOpen): ?>
					<th>体温</th>
				<?php endif ?>
                <th>签到时间</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
</div>

<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'footer.php'?>
<script src="<?= $staticAdminUrl ?>assets/laydate/laydate.js"></script>
<script type="text/javascript">
	var schoolId = 0;
	// 班级数据
	var normalClassJson = <?= $gradeNormalClassList ?>;
	$(function(){
		var table = $('#dynamic-table').dt({
			"ajaxUrl": '<?=admin_url('data/get_student_sign_list')?>',
			"columns": [
				{"data": "realname"},
                {"data": "class_name"},
                {"data": "schedule_lesson"},
                {"data": "sign_type"},
				{"data": "state"},
                {"data": function(ret) {
                    if(ret.sign_img) {
						return "<a href=" + ret.sign_img + " target='_blank'>查看图片</a>";
					} else {
						return ""
					}
				}},
				<?php if($temperatureOpen): ?>
					{"data": function(ret) {
						if(ret.temperature) {
							var temperature = ret.temperature + "℃";
							var str = "";
							if(ret.temperature > 37.2) {
								str += "<span class='red' style='font-weight:bold;'>" + temperature + "</span>";
							} else {
								str += "<span class='green' style='font-weight:bold;'>" + temperature + "</span>";
							}
							return str;
						} else {
							return '';
						}
					}},
				<?php endif ?>	
				{"data": function(ret) {
                    return ret.schedule_week_index + "<br>" + "第" + ret.schedule_class_index + "节课" + "<br>" + ret.createtime;
                }}
			],
			"callback": function() {

			}
		});

		
		// 年级班级联动
		$("#data-search-grade").change(function(){
			var gradeId = $(this).val();
			var classSelect = $("#data-search-class");
			// var teachSelect = $("#data-search-teach");
			var getUrl = "<?=admin_url('school/get_class_list')?>/" + gradeId;
			ajax_get(getUrl, {hideLoading: true}, function(res){
				var optionHtml = "";
				classSelect.html('<option value="">全部班级</option>');
				// teachSelect.html('<option value="">全部班级</option>');

				for(var i in res.data) {
					var classData = res.data[i];
					if(classData.class_type == '<?=CLASSES_TYPE_NORMAL?>') classSelect.append('<option value="'+ classData.id +'">'+ classData.class_name +'</option>');
					// if(classData.class_type == '<?=CLASSES_TYPE_TEACHING?>') teachSelect.append('<option value="'+ classData.id +'">'+ classData.class_name +'</option>');
				}
			})
		})
		// 点击关键字
		$("body").on("click", ".keyword-search-keyword", function(){
			var id = $(this).data("id");
			// 高亮当前点击对象
			$(this).parent().find(".keyword-search-keyword").removeClass("active");
			$(this).addClass("active");
			// 如果是点击年级
			if($(this).hasClass("keyword-search-grade")) {
				// 先清空班级列表
				$(".keyword-search-normal-class:gt(0)").remove();
				$(".keyword-search-teaching-class:gt(0)").remove();
				// 获取班级列表
				var normalClassList = normalClassJson[id];
				// var teachingClassList = teachingClassJson[id];
				for(var i in normalClassList) $(".keyword-search-normal-class:first").parent().append('<a href="javascript:;" class="keyword-search-keyword keyword-search-normal-class" data-id="'+ normalClassList[i].id +'">'+ normalClassList[i].name +'</a>');
				// for(var i in teachingClassList) $(".keyword-search-teaching-class:first").parent().append('<a href="javascript:;" class="keyword-search-keyword keyword-search-teaching-class" data-id="'+ teachingClassList[i].id +'">'+ teachingClassList[i].name +'</a>');
				// 选中全部班级
                var studentName = $("[name=student-name]").val();
                var type =$("#div-type .active").data("id");
				var state =$("#div-state .active").data("id");
				var temperature = $("#div-temperature .active").data("value");
                var gradeId = $("#div-grade .active").data("id");
                var rangeDate = $("#work-calendar").val();
                if(rangeDate) {
                    var arr = rangeDate.split(' - ');
                    var begindate = arr[0];
                    var enddate = arr[1];  
                }  else {
                    var begindate = '';
                    var enddate = '';  
                }
				// 筛选班级
				table.setAjaxData({
                    "keyword": studentName,
                    "type": type,
					"state": state,
					"temperature": temperature,
                    "gradeId": gradeId,
                    "begindate": begindate,
                    "enddate": enddate
                });
			} else {
                var studentName = $("[name=student-name]").val();
                var type =$("#div-type .active").data("id");
				var state =$("#div-state .active").data("id");
				var temperature = $("#div-temperature .active").data("value");
				var gradeId = $("#div-grade .active").data("id");
                var classId = $("#div-normal-class .active").data("id");
                var rangeDate = $("#work-calendar").val();
                if(rangeDate) {
                    var arr = rangeDate.split(' - ');
                    var begindate = arr[0];
                    var enddate = arr[1];  
                }  else {
                    var begindate = '';
                    var enddate = '';  
                }
				// 筛选班级
				table.setAjaxData({
					"classId": classId,
                    'keyword': studentName,
                    "type": type,
					"state": state,
					"temperature": temperature,
                    "gradeId": gradeId,
                    "begindate": begindate,
                    "enddate": enddate
				});
			}
		});
		// 敲回车就搜索
		$("[name=student-name]").keypress(function (e) {
                if (e.which == 13) {
                    $("#btn-search").trigger("click");
                }
		});
		// 清空搜索框
		$("[name=student-name]").keyup(function() {
			if($(this).val().length > 0) {
				$("#empty-search").show();
				$("#empty-search").click(function(){
					$("[name=student-name]").val('');
					$(this).hide();
                    // 重置搜索结果
                    var type =$("#div-type .active").data("id");
					var state =$("#div-state .active").data("id");
					var temperature = $("#div-temperature .active").data("value");
					var gradeId = $("#div-grade .active").data("id");
                    var classId = $("#div-normal-class .active").data("id");
                    var rangeDate = $("#work-calendar").val();
                    if(rangeDate) {
                        var arr = rangeDate.split(' - ');
                        var begindate = arr[0];
                        var enddate = arr[1];  
                    }  else {
                        var begindate = '';
                        var enddate = '';  
                    }
					table.setAjaxData({
						"gradeId": gradeId,
                        "classId": classId,
                        "type": type,
						"state": state,
						"temperature": temperature,
                        "begindate": begindate,
                        "enddate": enddate
					});
				})
			} else {
				$("#empty-search").hide();
			}
		}); 
		// 搜索标题
		$("#btn-search").click(function() {
            var studentName = $("[name=student-name]").val();
            var type =$("#div-type .active").data("id");
			var state =$("#div-state .active").data("id");
			var temperature = $("#div-temperature .active").data("value");
			var gradeId = $("#div-grade .active").data("id");
            var classId = $("#div-normal-class .active").data("id");
            var rangeDate = $("#work-calendar").val();
            if(rangeDate) {
                var arr = rangeDate.split(' - ');
                var begindate = arr[0];
                var enddate = arr[1];  
            }  else {
                var begindate = '';
                var enddate = '';  
            }
			table.setAjaxData({
                'keyword': studentName,
                "type": type,
				"state": state,
				"temperature": temperature,
				"gradeId": gradeId,
                "classId": classId,
                "begindate": begindate,
                "enddate": enddate
			})
		});

		// 导出数据
		$("#export_student_sign").click(function() {
            var studentName = $("[name=student-name]").val();
            var type =$("#div-type .active").data("id");
			var state =$("#div-state .active").data("id");
			var temperature = $("#div-temperature .active").data("value");
			var gradeId = $("#div-grade .active").data("id");
            var classId = $("#div-normal-class .active").data("id");
            var rangeDate = $("#work-calendar").val();
            if(rangeDate) {
                var arr = rangeDate.split(' - ');
                var begindate = arr[0];
                var enddate = arr[1];  
            }  else {
                var begindate = '';
                var enddate = '';  
            }
			$url = "<?=admin_url('data/export_student_sign?')?>";
			$queryStr = '';
			$queryArr = [];
			$str = '';
			if(studentName) {
				$str = "keyword=" + studentName;
				$queryArr.push($str);
			}
			if(gradeId) {
				$str = "gradeId=" + gradeId;
				$queryArr.push($str);
			}
			if(classId) {
				$str = "classId=" + classId;
				$queryArr.push($str);
            }
            if(type) {
				$str = "type=" + type;
				$queryArr.push($str);
            }
			if(state) {
				$str = "state=" + state;
			}
			if(temperature) {
				$str = "temperature=" + temperature;
				$queryArr.push($str); 
			}
            if(begindate && begindate != "0100-01-01") {
                if(begindate) {
                    $str = "begindate=" + begindate;
                    $queryArr.push($str);
                }
                if(enddate) {
                    $str = "enddate=" + enddate;
                    $queryArr.push($str);
                }
            }
			$queryStr = $queryArr.join("&");
			// console.log($queryStr);return;
			window.location.href  = $url + $queryStr;
        });

        //执行一个laydate实例
		var chooseDate = getNowDate();
		var today = getNowDate();
		//默认设置作业时间区间开始为前14天
		var dayBefore = getBeforeSevenDate();
        var rangeDate = dayBefore + ' - ' + today;
        // var rangeDateInit = '0100-01-01' + ' - ' + today;
		//作业统计的时间选择器
		laydate.render({
			elem: '#work-calendar', //指定元素
			// value: rangeDateInit,
			value: '',
			range: true,
			max: today,
			btns: ['confirm'],
			done: function(value) {
				var arr = value.split(' - ');
				// console.log(arr);return;
				var begindate = arr[0];
				var enddate = arr[1];
				var dayCount = getDaysBetween(begindate, enddate);
				// if(dayCount > 30) {
				// 	layer.msg('范围不能大于30天', {icon: 2});
				// 	return;
				// }
                var studentName = $("[name=student-name]").val();
                var type =$("#div-type .active").data("id");
				var state =$("#div-state .active").data("id");
				var temperature = $("#div-temperature .active").data("value");
                var gradeId = $("#div-grade .active").data("id");
                var classId = $("#div-normal-class .active").data("id");
                table.setAjaxData({
                    'keyword': studentName,
                    "type": type,
					"state": state,
					"temperature": temperature,
                    "gradeId": gradeId,
                    "classId": classId,
                    "begindate": begindate,
                    "enddate": enddate
                })
			}
        });
    })
        //获取当天日期
        function getNowDate() {
        var date = new Date();
        $res = formatDate(date);
        return $res;
    }

    function getBeforeSevenDate() {
        var date = new Date(); //获取今天日期
        date.setDate(date.getDate() - 6);
        $res = formatDate(date);
        return $res;
    }

    function formatDate(date) {
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        if (month < 10) {
            month = "0" + month;
        }
        if (day < 10) {
            day = "0" + day;
        }
        var dateFormat = year + "-" + month + "-" + day;
        return dateFormat;
	}
	function  getDaysBetween(dateString1,dateString2){
		var  startDate = Date.parse(dateString1);
		var  endDate = Date.parse(dateString2);
		var days = (endDate - startDate)/(1*24*60*60*1000) + 1;
		// alert(days);
		return  days;
	}
</script>